<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
</head>
<body>
	<div id="div1">
		<input></input>
		<span>6-18个字符，可使用字母、数字、下划线、需以字母开头</span>
		<input></input>
	</div>

</body>
</html>
<style>
	#div1 {width:400px;height: 200px;background-color: lightblue;border: 1px solid #000;display:flex;flex-direction: column;justify-content: center;align-items: center;}
	#div1 input{width:200px;height: 30px;margin-top: 20px}
	#div1 span{font-size: 15px;color: red}
</style>
<script>


	function fun(){
		var ocontent=document.getElementById('content');
		var omsg = document.getElementById('msg');
		var usernametxt = ocontent.value;
		if(usernametxt.length<6 || usernametxt.length>18){
			omsg.innerHTML = "请输入6-10个字符的用户名";
		}else if(!isDef(usernametxt)){
			omsg.innerHTML="请使用字母、数字、下划线作为用户名";
		}else if(!(usernametxt[0]>="a" &&  usernametxt[0]<="z" ||usernametxt[0]>="A" && usernametxt[0]<="Z")){
			omsg.innerHTML="用户名称需字母开头";
		}else{
			omsg.innerHTML="用户名字设定满足要求！"
		}
	}
	function isDef(char){
		for(var i=0;i<char.length;i++){
			if((char[i]>="a" && char<="2" || char[i]>="A" && cahr<="Z" || char[i]>=0 && char[i]<=9 || char[i]=="_")){
				return false

			}
		}

		return true;
	}
</script>